<template>
  <div>
    <!-- 表格 -->
    <div class="applicationList">
      <el-table :data="tableData" style="width: 100%" height="500" stripe>
        <el-table-column prop="orderNo" label="订单号"></el-table-column>
        <el-table-column prop="dealTime" label="交易时间"></el-table-column>
        <el-table-column prop="standards" label="样品规格"></el-table-column>
        <el-table-column prop="number" label="申请数量"></el-table-column>
        <el-table-column prop="amount" label="交易金额"></el-table-column>
      </el-table>
      <el-pagination
        style="text-align:right;margin-top:20px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          orderNo: "CGJ3r5k5hjjhk345",
          dealTime: "2019-05-16 14:34:13",
          standards: "adAFAFDFSDFSFasffsf sdfgsG FSD GSF",
          number: 150,
          amount: "￥88"
        },
        {
          orderNo: "CGJ3r5k5hjjhk345",
          dealTime: "2019-05-16 14:34:13",
          standards: "adAFAFDFSDFSFasffsf sdfgsG FSD GSF",
          number: 150,
          amount: "￥88"
        },
        {
          orderNo: "CGJ3r5k5hjjhk345",
          dealTime: "2019-05-16 14:34:13",
          standards: "adAFAFDFSDFSFasffsf sdfgsG FSD GSF",
          number: 150,
          amount: "￥88"
        }
      ],
      currentPage: 1,
      pageSize: 10,
      total: 50
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
};
</script>

<style lang="scss" scoped>
.applicationList {
  width: 100%;
  background: #fff;
  padding: 20px 2px;
  border-radius: 5px;
  box-shadow: 2px 3px 15px 0 #ccc;
}
</style>